<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' title="适用范围" @close="resetData()" :visible.sync="dialogVisible" width="408px">
        <el-radio-group v-model="types" size="small" class="com_radio_group">
            <el-radio :label="1" border>
                <div class="radio_text1">广告账户</div>
                <div class="radio_text2">设置的规则将应用于所选广告账户</div>
                <img src="@/assets/img/market_checked.svg" alt="" class="radio_check_icon">
            </el-radio>
            <el-radio :label="2" border>
                <div class="radio_text1">广告系列</div>
                <div class="radio_text2">设置的规则将应用于所选广告账户下的所有广告系列</div>
                <img src="@/assets/img/market_checked.svg" alt="" class="radio_check_icon">
            </el-radio>
            <el-radio :label="3" border>
                <div class="radio_text1">广告组</div>
                <div class="radio_text2">设置的规则将应用于所选广告账户下的所有广告组</div>
                <img src="@/assets/img/market_checked.svg" alt="" class="radio_check_icon">
            </el-radio>
        </el-radio-group>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetData()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props:["viewForm"],
    name: "",
    data() {
        return {
            loading: false,
            dialogVisible: false,
            types:null
        };
    },
    created() {
        
    },
    beforeDestroy() {
        
    },
    methods: {
        getData(){
            this.dialogVisible = true
            this.types = this.viewForm.type || null
        },
        // 添加
        submitForm() {
            if(!this.types){
                this.$message.error("请选择适用范围！");
                return;
            }
            this.$emit("getRangeData",this.types)
            this.dialogVisible = false
        },

        resetData(){
            this.types = null
            this.dialogVisible = false
        }
    },
    components: {},
};
</script>


<style scoped>
/deep/ .com_radio_group{
    display: block;
    margin-top: -12px;
}
/deep/ .com_radio_group .el-radio{
    margin-right: 0;
    padding: 12px;
    height: auto;
    width: 100%;
    white-space: normal;
    margin-top: 12px;
    position: relative;
    border-radius: 4px;
}
.radio_check_icon{
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
/deep/ .com_radio_group .el-radio.is-bordered.is-checked{
    background: rgba(68, 117, 255, 0.05);
}
/deep/ .com_radio_group .el-radio.is-bordered.is-checked .radio_check_icon{
    display: block;
}
/deep/ .com_radio_group .el-radio.is-bordered+.el-radio.is-bordered{
    margin-left: 0;
}
/deep/ .com_radio_group .el-radio .el-radio__input{
    display: none;
}
/deep/ .com_radio_group .el-radio .el-radio__label{
    padding-left: 0;
}
.radio_text1{
    line-height: 20px;
    font-size: 14px;
}
.radio_text2{
    font-size: 12px;
    color: #B4B7BD;
    line-height: 20px;
    margin-top: 4px;
}
</style>
